<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>情侣APP - 纪念日</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <!-- 纪念日日历 -->
        <div class="screen">
            <div class="screen-title">纪念日</div>
            <div class="calendar-screen">
                <div class="calendar">
                    <div class="calendar-header">
                        <i class="fas fa-chevron-left"></i>
                        <h3>2023年6月</h3>
                        <i class="fas fa-chevron-right"></i>
                    </div>
                    <div class="calendar-grid">
                        <div class="calendar-day">日</div>
                        <div class="calendar-day">一</div>
                        <div class="calendar-day">二</div>
                        <div class="calendar-day">三</div>
                        <div class="calendar-day">四</div>
                        <div class="calendar-day">五</div>
                        <div class="calendar-day">六</div>
                        
                        <div class="calendar-day"></div>
                        <div class="calendar-day"></div>
                        <div class="calendar-day"></div>
                        <div class="calendar-day">1</div>
                        <div class="calendar-day">2</div>
                        <div class="calendar-day">3</div>
                        <div class="calendar-day weekend">4</div>
                        
                        <div class="calendar-day weekend">5</div>
                        <div class="calendar-day">6</div>
                        <div class="calendar-day">7</div>
                        <div class="calendar-day">8</div>
                        <div class="calendar-day">9</div>
                        <div class="calendar-day">10</div>
                        <div class="calendar-day weekend">11</div>
                        
                        <div class="calendar-day weekend">12</div>
                        <div class="calendar-day">13</div>
                        <div class="calendar-day event">14</div>
                        <div class="calendar-day">15</div>
                        <div class="calendar-day">16</div>
                        <div class="calendar-day">17</div>
                        <div class="calendar-day weekend">18</div>
                        
                        <div class="calendar-day weekend">19</div>
                        <div class="calendar-day event">20</div>
                        <div class="calendar-day">21</div>
                        <div class="calendar-day">22</div>
                        <div class="calendar-day">23</div>
                        <div class="calendar-day">24</div>
                        <div class="calendar-day weekend">25</div>
                        
                        <div class="calendar-day weekend">26</div>
                        <div class="calendar-day">27</div>
                        <div class="calendar-day">28</div>
                        <div class="calendar-day">29</div>
                        <div class="calendar-day">30</div>
                        <div class="calendar-day"></div>
                        <div class="calendar-day"></div>
                    </div>
                </div>
                
                <h3 style="margin-bottom: 15px;">即将到来的纪念日</h3>
                <div class="events-list">
                    <div class="event-item">
                        <div class="event-date">6月14日</div>
                        <div class="event-title">520天纪念日</div>
                        <div class="event-desc">在一起的第520天</div>
                        <div class="event-plan">
                            <i class="fas fa-gift"></i>
                            <span>计划：准备一束鲜花和甜点</span>
                        </div>
                    </div>
                    <div class="event-item">
                        <div class="event-date">6月20日</div>
                        <div class="event-title">第一次约会纪念日</div>
                        <div class="event-desc">第一次约会的日子</div>
                        <div class="event-plan">
                            <i class="fas fa-utensils"></i>
                            <span>计划：重回第一次约会的餐厅</span>
                        </div>
                    </div>
                    <div class="event-item">
                        <div class="event-date">7月7日</div>
                        <div class="event-title">七夕节</div>
                        <div class="event-desc">中国情人节</div>
                        <div class="event-plan">
                            <i class="fas fa-calendar-plus"></i>
                            <span>点击添加计划</span>
                        </div>
                    </div>
                </div>
                
                <div class="add-activity" id="addEventBtn">
                    <i class="fas fa-plus"></i>
                </div>
                
                <div class="bottom-nav">
                    <div class="nav-item" data-page="dashboard.html">
                        <i class="fas fa-home"></i>
                        <span>主页</span>
                    </div>
                    <div class="nav-item active" data-page="calendar.html">
                        <i class="fas fa-calendar"></i>
                        <span>日历</span>
                    </div>
                    <div class="nav-item" data-page="capsule.html">
                        <i class="fas fa-clock"></i>
                        <span>时空胶囊</span>
                    </div>
                    <div class="nav-item" data-page="settings.html">
                        <i class="fas fa-cog"></i>
                        <span>设置</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="script.js"></script>
    <script>
        // 页面跳转逻辑
        document.querySelectorAll('.nav-item').forEach(item => {
            item.addEventListener('click', function() {
                const page = this.getAttribute('data-page');
                if (page) {
                    window.location.href = page;
                }
            });
        });
        
        // 日历日期点击事件
        document.querySelectorAll('.calendar-day:not(:empty)').forEach(day => {
            if (day.textContent.trim() !== '' && !isNaN(day.textContent.trim())) {
                day.addEventListener('click', function() {
                    alert(`查看${day.textContent}日的事件`);
                });
            }
        });
    </script>
</body>
</html> 